<template>
  <div>
    <div class="top">
      <div class="box">
        <img :src="form.avatar" alt="">
        <p>{{ form.name }}</p>
        <p>
          <span>
            CEO: {{ form.ceoName }}
            <img style="height: 30px;" :src="form.ceoAvatar" alt="">
          </span>
        </p>
        <p style="margin-top: 30px">Phone:{{ form.phone }}</p>
        <p>{{ form.scale }} 创建于 {{ form.createDate }} </p>
        <p>注册资金 ${{ form.registeredCapital }}</p>
        <div>
          <p style="font-weight: 700">简介:</p>
          <span style="font-size: 12px">{{ form.description }}</span>
        </div>
      </div>
    </div>
    <div class="admin">
      <div style="width:1100px;height:600px;">
        <div class="helder">
          <span>欢迎来到航木软件人力资源管理系统</span>
        </div>
        <div class="subject">

          <div class="block">
            <el-carousel height="450px">
              <el-carousel-item v-for="item in list" :key="item.id">
                <h3 class="small">
                  <el-image
                      style="width: 1100px; height: 450px"
                      :src="item.url">
                  </el-image>
                </h3>
              </el-carousel-item>
            </el-carousel>
          </div>

        </div>
      </div>

    </div>
  </div>
</template>

<script>
import {company} from "@/api/sys/company";
import {showSlide} from "@/api/sys/banner";

export default {

  data(){
    return{
      value: new Date(),
      form:{},
      list:[]
    }
  },
  created() {
    this.getList()
    this.querySlide()
  },
  methods:{
    async getList(){
      const {data:res} = await company()
      this.form = res.data.company
    },
    async querySlide(){
      const {data:res}  = await showSlide()
      this.list = res.data.list
    }
  }

}
</script>

<style scoped>
  .top{
    margin: 100px 100px;
  }
  .box img {
    height: 200px
  }
  .box{
    height:600px;
    width: 200px;
    float: left;
  }
  .box p{
    width:200px;
    text-align: center;
    font-size: 14px;
    color:#666;
    height:20px;
    line-height: 20px;
  }
  .admin{
    float:right;
    height:600px;
    width:1300px;
  }
  .admin .helder{
    margin-top:100px;
    height:50px;
    background-color:orchid;
    color:#000;
    font-size: 18px;
    line-height: 50px;
    text-align: center;
  }
  .admin .subject{
    height:450px;
    background-color:gray;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
